<!-- 「活动规则」 页面-->
<template>
  <uni-nav-bar
    class="nav-bar"
    fixed="true"
    title="活动规则"
    status-bar="true"
    :border="false"
    left-icon="left"
    @clickLeft="back"
  />
  <div class="title">
    嗨喵“互动分享季”活动规则
  </div>
  <div class="activity-rule">
    <rich-text :nodes="rules" />
  </div>
</template>

<script lang="ts" setup>
import { getSpsjRule } from '@/api/sjsp/video';
import { back } from '@/utils/navigate';
import { addClassToHtml } from '@/utils/tools';

onMounted(() => {
  getRule();
});

/** 获取活动规则 */
const rules = ref('');
const getRule = async () => {
  const res: any = await getSpsjRule();
  const ruleText = res?.data?.data.ruleValue;
  rules.value = addClassToHtml(ruleText);
};
</script>

<style lang="scss">
.activity-rule {
  padding: 20px;
}

.title {
  font-size: 48rpx;
  text-align: center;
}

// 内容
.rich-h1 {
  margin-top: 5px;

  font-weight: 600;
}

.rich-p {
  margin-top: 5px;

  display: block;

  text-align: justify;
}

.rich-ol {
  margin-top: 5px;

  padding: 0 0 0 20px;

  color: #333;

  .rich-li {
    margin: 5px 0;

    color: #333;
    text-align: justify;
  }
}

.rich-table {
  margin-top: 5px;

  border-collapse: collapse;

  border: 1px solid #333;

  color: #333;

  .rich-tr {
    border: 1px solid #333;

    .rich-td {
      border: 1px solid #333;

      padding: 5px;
    }
  }
}
</style>
